<script type="text/javascript" src="/static/admin/js/sku.js"></script>
<style>
    .specs {
        /*display: block;*/
    }

    .skus-warp {

    }

    .SKU_TYPE {
        width: 100%;
    }
</style>

<script type="text/javascript" charset="utf-8" src="/static/admin/lib/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/admin/lib/ueditor/ueditor.all.js"></script>
<!--<script type="text/javascript" charset="utf-8" src="/static/admin/lib/ueditor/lang/zh-cn/zh-cn.js"></script>-->
<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label required">商品名称</label>
        <div class="layui-input-inline">
            <input type="text" name="title" lay-verify="required" lay-reqtext="商品名不能为空" placeholder="请输入商品名称"
                   value="" class="layui-input">
            <tip>填写商品名称。</tip>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">商品分类</label>
        <div class="layui-input-inline">

            <input type="text" name="category_id" id="cate" class="layui-input layui-disabled" disabled
                   style="color: #000000 !important;" placeholder="选择商品分类">
            <input type="hidden" name="category_id" id="category_id" class="layui-input layui-disabled" disabled
                   placeholder="选择商品分类">
            <tip>选择商品分类。</tip>
        </div>
        <div class="layui-input-inline">
            <button class="layui-btn layui-btn-normal" id="category">选择商品分类</button>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">商品单位</label>
        <div class="layui-input-inline">
            <input type="text" name="promotion_title" lay-verify="required" lay-reqtext="商品单位不能为空" placeholder="请输入商品单位"
                   value="" class="layui-input">
            <tip>填写商品单位。</tip>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">关键词</label>
        <div class="layui-input-inline">
            <input type="text" name="keywords" lay-verify="required" lay-reqtext="商品关键词不能为空" placeholder="请输入商品关键词"
                   value="" class="layui-input">
            <tip>填写商品关键词。</tip>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">商品副标题</label>
        <div class="layui-input-inline">
            <input type="text" name="sub_title" lay-verify="required" lay-reqtext="商品副标题不能为空" placeholder="请输入副标题"
                   value="" class="layui-input">
            <tip>填写商品副标题。</tip>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">是否显示库存</label>
        <div class="layui-input-inline">
            <input type="checkbox" name="is_show_stock" value="1" lay-skin="switch" lay-text="显示|关闭">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">生产日期</label>
        <div class="layui-input-inline">
            <input type="text" name="production_time" lay-verify="required" id="production_time" lay-reqtext="上产日期不能为空"
                   placeholder="请输入生产日期"
                   value=""
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">商品规格</label>
        <div class="layui-input-block">
            <input type="radio" name="goods_specs_type" value="1" title="单规格" checked lay-filter="goods_specs_type">
            <input type="radio" name="goods_specs_type" value="2" title="多规格" lay-filter="goods_specs_type">
        </div>
        <div class="layui-form-item spec-more" style="display: none">
            <form action="" class="layui-form">
                <div class="layui-form-item">
                    <a class="layui-btn add-specs">添加多规格</a>
                    <label class="layui-form-label">规格：</label>
                    <div class="layui-input-block">
                        <table class="layui-table" id="spec-table">
                            <thead>
                            <tr>
                                <th>规格名</th>
                                <th>规格值</th>
                            </tr>
                            </thead>
                            <tbody class="skus-warp">
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="layui-form-item layui-hide">
                    <label class="layui-form-label">SKU表：</label>
                    <div class="layui-input-block">
                        <table class="layui-table" id="sku-table">
                            <thead></thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>

            </form>
        </div>
    </div>
    <div class="specs_one">
        <div class="layui-form-item">
            <label class="layui-form-label required">商品现价</label>
            <div class="layui-input-inline">
                <input type="text" name="price" lay-verify="required" lay-reqtext="商品现价不能为空" placeholder="请输入商品现价"
                       value=""
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">商品原价</label>
            <div class="layui-input-inline">
                <input type="text" name="cost_price" lay-verify="required" lay-reqtext="商品原价" placeholder="请输入商品原价"
                       value=""
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">商品库存</label>
            <div class="layui-input-inline">
                <input type="text" name="stock" lay-verify="required" lay-reqtext="商品库存" placeholder="请输入商品库存"
                       value=""
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">商品成本价</label>
            <div class="layui-input-inline">
                <input type="text" name="market_price" lay-verify="required" lay-reqtext="商品成本价" placeholder="请输入商品成本价"
                       value=""
                       class="layui-input">
            </div>
        </div>

    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上传大图</label>
        <div class="layui-input-block">
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test1">上传图片</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="demo1" style="max-width: 200px;max-height: 200px">
                    <p id="demoText"></p>
                </div>
                <div style="width: 95px;">
                    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                        <div class="layui-progress-bar" lay-percent=""></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上传推荐图</label>
        <div class="layui-input-block">
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="recommend_image">上传图片</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="recommend_image_img" style="max-width: 200px;max-height: 200px">
                    <p id="recommend_imageText"></p>
                </div>
                <div style="width: 95px;">
                    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="recommend_image">
                        <div class="layui-progress-bar" lay-percent=""></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上传轮播图</label>
        <div class="layui-input-block">
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test2">多图片上传</button>
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                    预览图：(点击图片删除)
                    <div class="layui-upload-list" id="demo2"></div>
                </blockquote>
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注信息</label>
        <div class="layui-input-block">
            <script id="editor" name="desc" type="text/plain"></script>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
<style>
    .upload_img:hover {
        cursor: pointer;
    }
</style>

<script type="text/javascript">
    layui.config({
        base: '/static/plugs/lay_ext'
    }).extend({
        xmSelect: '/xm-select'
    })
    let ue = UE.getEditor('editor')
    layui.use(['form', 'xmSelect', 'element', 'upload', 'laydate'], function (exports) {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$,
            xmSelect = layui.xmSelect,
            element = layui.element,
            upload = layui.upload,
            laydate = layui.laydate;
        laydate.render({
            elem: '#production_time' //指定元素
        });
        //富文本

        //大图
        let uploadInst = upload.render({
            elem: '#test1'
            , field: 'image'
            , url: "{:url('upload/image')}" //改成您自己的上传接口
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                //如果上传失败
                if (res.code != {$result.success}) {
                    return layer.msg(res.msg, {icon: 5, shade: 0.5})
                }
                //上传成功的一些操作
                //……
                $('#demoText').html('<input name="big_img" type="hidden" value="' + res.data.url + '"/>'); //置空上传失败的状态
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
            //进度条
            , progress: function (n, elem, e) {
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if (n === 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
        //推荐图
        var uploadInstRecommend_image = upload.render({
            elem: '#recommend_image'
            , field: 'image'
            , url: "{:url('upload/image')}" //改成您自己的上传接口
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#recommend_image_img').attr('src', result); //图片链接（base64）
                });

                element.progress('recommend_image', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                //如果上传失败
                if (res.code != {$result.success}) {
                    return layer.msg(res.msg, {icon: 5, shade: 0.5})
                }
                //上传成功的一些操作
                //……
                $('#recommend_imageText').html('<input name="recommend_image" type="hidden" value="' + res.data.url + '"/>'); //置空上传失败的状态
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#recommend_imageText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInstRecommend_image.upload();
                });
            }
            //进度条
            , progress: function (n, elem, e) {
                element.progress('recommend_image', n + '%'); //可配合 layui 进度条元素使用
                if (n === 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });

        //多图片上传
        upload.render({
            elem: '#test2'
            , url: "{:url('upload/image')}" //改成您自己的上传接口
            , field: 'image'
            , multiple: true
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    let html = '';
                    const n = index.split('-')[1];
                    html += '<img src="' + result + '" data-id="' + n + '" class="layui-upload-img upload_img upload_img_' + n + '" onclick="remove_img(' + n + ')" style="max-width: 200px;max-height: 200px;" />';

                    $('#demo2').append(html)

                });
            }
            , done: function (res, index) {
                //上传完毕
                const n = index.split('-')[1];
                if (res.code == {$result.success}) {
                    return layer.msg(res.msg, {icon: 6, shade: 0.5}, function () {
                        let html = '';
                        html += '<input type="hidden" name="images[]" value="' + res.data.url + '" class="upload_img_' + n + '">'
                        $("#demo2").append(html)
                    })
                } else {
                    return layer.msg(res.msg, {icon: 5, shade: 0.5})
                }
            }
        });
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            let param = data.field;
            param['description'] = ue.getContent();
            $.post("{:url('add')}", param, function (res) {
                if (res.code == "{$result.success}") {
                    layer.msg(res.msg, {icon: 6, shade: 0.5}, function () {
                        tao.father_reload()
                    })
                } else {
                    layer.msg(res.msg, {icon: 5, shade: 0.5})
                }
            });
            // var index = layer.alert(JSON.stringify(param), {
            //     title: '最终的提交信息'
            // }, function () {
            //
            //     // 关闭弹出层
            //     layer.close(index);
            //
            //     var iframeIndex = parent.layer.getFrameIndex(window.name);
            //     parent.layer.close(iframeIndex);
            //
            // });

            return false;
        });
        form.on('radio(goods_specs_type)', function (data) {
            // console.log(data.elem); //得到radio原始DOM对象
            // console.log(data.value); //被点击的radio的value值
            const value = data.value;
            console.log(value)
            if (value == 1) {
                $(".specs_one").slideDown();
                $(".spec-more").slideUp()
            } else if (value == 2) {
                $(".spec-more").slideDown();
                $(".specs_one").slideUp()
            }
        });
        $("#category").on('click', function () {
            tao.open("选择分类", "{:url('category/dialog')}", 600, 500);
        })
        $(".add-specs").click(function () {
            // $(".skus-warp").append(`<tr>
            //                     <td data-id="1">颜色</td>
            //                     <td>
            //                         <input type="checkbox" title="红" lay-filter="filter" value="1" checked>
            //                         <input type="checkbox" title="黄" lay-filter="filter" value="2">
            //                         <input type="checkbox" title="蓝" lay-filter="filter" value="3">
            //                     </td>
            //                 </tr>`);
            // form.render()
            tao.open("选择规则", "{:url('specs/dialog')}", 900, 500)
        })

    });

    function remove_img(id) {
        $(".upload_img_" + id).remove()
    }
</script>